<template lang="pug">
.view.cp-train-record.fix-flex-pos
  //- 查询
  el-form.rd-search(:inline="true")
    el-form-item
      el-input(v-model="crsName", placeholder="名称编号", style="width: 160px")
    el-form-item(label="课程分类 : ")
      el-select(v-model="crsType", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in crsTypeSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="授课方式 : ")
      el-select(v-model="crsForm", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in crsFormSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="培训机构 : ")
      el-select(v-model="crsAgency", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in agencySelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="培训老师 : ")
      el-select(v-model="crsTeacher", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in teacherSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="完成时间 : ")
      el-date-picker(
        v-model="crsDateArr"
        type="daterange"
        :clearable="false"
        style="width: 256px"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期")
    el-form-item(label="状态 : ")
      el-select(v-model="crsStatus", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in statusSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-button(type="primary", @click="resetTime", plain, style="margin-right: 16px") 重置时间
    el-button(type="primary", @click="searchRecords") 搜索
    el-button(type="primary", @click="resetSearch", plain) 重置
  .rd-table
    el-table(:data="recordList", highlight-current-row, height="100%", size="mini", v-loading="loadingRecords")
      el-table-column(align="center", type="index", label="序号", :fixed="true")
      el-table-column(align="center", show-overflow-tooltip, prop="id", label="课程编号")
      el-table-column(align="center", show-overflow-tooltip, prop="name", label="课程名称")
      el-table-column(align="center", show-overflow-tooltip, prop="type", label="课程分类")
        template(slot-scope="scope")
          span {{ scope.row.type | compare-list(crsTypeSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="form", label="课程形式")
        template(slot-scope="scope")
          span {{ scope.row.form | compare-list(crsFormSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="agency", label="培训机构")
        template(slot-scope="scope")
          span {{ scope.row.agency | compare-list(agencySelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="teacher", label="培训老师")
        template(slot-scope="scope")
          span {{ scope.row.teacher | compare-list(teacherSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="time", label="完成时间")
        template(slot-scope="scope")
          span {{ scope.row.time | date-format }}
      el-table-column(align="center", show-overflow-tooltip, prop="status", label="状态")
        template(slot-scope="scope")
          span {{ scope.row.status | compare-list(statusSelectAll) }}
      el-table-column(align="center", show-overflow-tooltip, prop="grade", label="得分")
      el-table-column(align="center", label="操作", min-width="48px")
        template(slot-scope="scope")
          el-tooltip(content="查看")
            i.icon-act.el-icon-view(@click="viewCourse(scope.row)")
  //- 分页
  el-pagination.rd-pagination(
    layout="total, prev, pager, next, jumper",
    @current-change="changeRecordPage",
    :current-page.sync="currentPage",
    :page-size="20",
    :total="recordListTotal")
  CourseView(:visible="showCourseView", :detail="courseDetail", @close="showCourseView=false")
</template>

<script>
import { mapGetters } from 'vuex';
import TrainData from '@/data/train';
import CourseView from '@/components/train/course/CourseView';

export default {
  name: 'trarecord',
  components: {
    CourseView
  },
  data() {
    return {
      // search block
      crsName: null,
      crsType: null,
      crsForm: null,
      crsAgency: null,
      crsTeacher: null,
      crsStatus: null,
      crsDateArr: [],
      // table block
      recordList: [],
      recordListTotal: 1,
      loadingRecords: true,
      currentPage: 1,
      // view
      showCourseView: false,
      courseDetail: {},
      // select
      statusSelectAll: [
        { value: null, name: '全部' },
        { value: 0, name: '可选' },
        { value: 1, name: '必选' }
      ],
    };
  },
  computed: {
    ...mapGetters([
      'crsTypeSelect',
      'crsTypeSelectAll',
      'crsFormSelect',
      'crsFormSelectAll',
      'teacherSelect',
      'teacherSelectAll',
      'agencySelect',
      'agencySelectAll'
    ])
  },
  methods: {
    // 搜索
    resetTime () {
      this.crsDateArr = [];
    },
    resetSearch () {
      this.crsName = null;
      this.crsType = null;
      this.crsForm = null;
      this.crsAgency = null;
      this.crsTeacher = null;
      this.crsStatus = null;
      this.crsDateArr = [];
    },
    searchRecords () {
      this.loadingRecords = true;
      setTimeout(() => {
        this.recordList = TrainData.recordList;
        this.recordListTotal = 86;
        this.currentPage = 1;
        this.$message.success('刷新成功');
        this.loadingRecords = false;
      }, 1000);
    },
    // 表格
    viewCourse (row) {
      // TraApi.getCourseDetail({ id: row.order }).then((result) => {
      //   if (!result.status) {
      console.log(row.id);
      this.courseDetail = TrainData.courseDetail;
      this.showCourseView = true;
      //   } else {
      //     this.$message.error(result.comment);
      //   }
      // }).catch((error) => {
      //   console.log(JSON.stringify(error));
      // });
    },
    // 翻页
    changeRecordPage (currentPage) {
      console.log(currentPage);
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
    setTimeout(() => {
      this.recordList = TrainData.recordList;
      this.recordListTotal = 121;
      this.loadingRecords = false;
    }, 1000);
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 104px
$PAGEHEIGHT: 56px
.cp-train-record
  .rd-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .rd-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow: auto
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
  .rd-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
</style>
